<template>
  <!--  余额明细-->
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="closeHandle"
    class="dialog"
    :title="(checkedItem[0] ? checkedItem[0].nikeName : '') + '的余额明细'"
  >
    <el-row class="queryTime">
      <el-date-picker
        v-model="queryForm.yearMonth"
        type="month"
        value-format="yyyyMM"
        @change="pickTime"
        placeholder="选择月"
      >
      </el-date-picker>
    </el-row>
    <el-table
      :data="dataList"
      :header-cell-style="{
        background: '#DCDFE6',
      }"
    >
      <el-table-column prop="detailName" label="交易说明"> </el-table-column>
      <el-table-column prop="createTime" label="交易时间"> </el-table-column>
      <el-table-column prop="useBalance" label="交易金额（元）">
        <template slot-scope="scope">
          <span style="color: red;" v-if="scope.row.changeType === 0"
            >+{{ scope.row.useBalance }}</span
          >
          <span style="color: red;" v-else>-{{ scope.row.useBalance }}</span>
        </template>
      </el-table-column>
    </el-table>
    <PageManage
      :pageSize="pageSize"
      :pageNum="pageNum"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, PropSync, Watch } from "vue-property-decorator";
import { getBalanceDetail } from "@/api/customer/member";
import PageManage from "@/components/PageManage.vue";
import DateUtil from "@/store/modules/date";

@Component({
  components: {
    PageManage,
  },
})
export default class BalanceDetail extends Vue {
  @PropSync("visible", {
    type: Boolean,
    default: false,
  })
  dialogVisible: boolean;

  @Prop({
    type: Array,
    default: () => {
      return [];
    },
  })
  checkedItem;

  /** 分页条数 */
  pageSize = 10;

  /** 分页页码 */
  pageNum = 1;

  /** 数据长度 */
  total = 0;

  queryForm = {
    yearMonth: "",
  };

  dataList: any = [];

  @Watch("dialogVisible")
  handleVisibleChange(v) {
    if (v) {
      const now = new DateUtil();
      this.queryForm.yearMonth = `${now.getY()}${now.getM()}`;
      this.getDataList();
    }
  }

  pickTime(){
    this.pageNum = 1
    this.getDataList();
  }

  async getDataList() {
    const form = {
      page: this.pageNum,
      size: this.pageSize,
      yearMonth: this.queryForm.yearMonth,
      userShopId: this.checkedItem[0].userId,
    };
    const data = await getBalanceDetail(form);
    this.dataList = data.data.list;
    this.pageSize = data.data.size;
    this.pageNum = data.data.current;
    this.total = data.data.total;
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.pageSize = val;
    this.pageNum = 1
    this.getDataList();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.pageNum = val;
    this.getDataList();
  }

  /**
   * 关闭弹窗
   */
  async closeHandle() {
    try {
      const result = await this.confirmHandle();
      if (result === "confirm") {
        this.dialogVisible = false;
      }
    } catch (e) {
      console.log(e);
    }
  }

  async beforeCloseHandle(done) {
    try {
      const result = await this.confirmHandle();
      if (result === "confirm") {
        done();
      }
    } catch (e) {
      console.log(e);
    }
  }

  /**
   * 关闭确认
   */
  async confirmHandle() {
    return await this.$confirm("确定退出余额明细页面？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
  }
}
</script>

<style scoped lang="scss">
.queryTime {
  float: right;
  margin-bottom: 25px;
}
/deep/ .el-dialog__header {
  border-bottom: 1px solid rgba(128, 128, 128, 0.23);
}
</style>
